import React, { Suspense } from 'react'
import { RouterProvider } from 'react-router-dom'
import { ThemeProvider, createGlobalStyle } from 'antd-style'
import { App as AntdApp, ConfigProvider } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import router from './router'
import theme from './theme.json'
import darkTheme from './dark-theme.json'
import { Provider } from 'react-redux'
import store, { persistor } from './store'
import { PersistGate } from 'redux-persist/integration/react'

const App: React.FC = () => {
  return (
    <ConfigProvider locale={zhCN}>
      <ThemeProvider theme={theme} themeMode={'light'}>
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            <AntdApp>
              <GlobalStyle />
              <Suspense>
                <RouterProvider router={router} />
              </Suspense>
            </AntdApp>
          </PersistGate>
        </Provider>
      </ThemeProvider>
    </ConfigProvider>
  )
}

export default App

const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
  }

  body {
    color: ${(p) => p.theme.colorText};
    background-color: ${(p) => p.theme.colorBgLayout};
    font-family: ${(p) => p.theme.fontFamily};
    font-size: ${(p) => p.theme.fontSize + 'px'};
  }

  .anticon {
    font-size: ${(p) => p.theme.fontSizeIcon + 'px'};
  }
`
